<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>大文件上传</title>
    <header th:replace="~{./common/header.html}"></header>
    <link href="/static/webuploader/webuploader.css" rel="stylesheet" />
    <script src="/static/webuploader/webuploader.min.js"></script>
    <script src="/static/js/md5.js" rel="stylesheet"></script>

    <style>
        .file-item{
            background: gainsboro;
        }
        .file-item > div{
            background: green;
            height: 10px;
        }
    </style>


</head>
<body>
<div class="top" th:insert="~{./common/top.html}"></div>
<div class="left" th:insert="~{./common/left.html}"></div>
<div class="page">
    <div style="width: 100%; border: 1px solid gainsboro;overflow: hidden; padding: 20px;">
        <button type="button" class="btn btn-primary" id="filePicker">添加文件</button>
        <button type="button" class="btn btn-success" onclick="upload()">开始上传</button>
        <button type="button" class="btn btn-warning" onclick="pause()">取消上传</button>
    </div>



    <br>
    <div id="fileList" style="width: 100%; border: 1px solid gainsboro;overflow: hidden; padding: 20px;">
        <div class="file-item">
            <span>test</span>
            <div style="width: 20%;"></div>
        </div>
    </div>

</div>



<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel1" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel1">添加用户</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
               <h5>确认删除？</h5>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-danger" id="deleteBtn">删除</button>
            </div>
        </div>
    </div>
</div>


<script th:inline="javascript">
    WebUploader.Uploader.register({
        'name': 'webUploaderHookCommand',
        'before-send-file': 'beforeSendFile',
        "before-send": "beforeSend"
    }, {
        beforeSendFile: function(file) {
            var task = new WebUploader.Deferred();
            fileName = file.name;
            fileSize = file.size;
            (new WebUploader.Uploader()).md5File(file, 0, 10 * 1024 * 1024).progress(function(percentage) {}).then(function(val) {
                fileMd5 = val;
                var url = checkUrl;
                var data = {
                    type: 0,
                    fileName: fileName,
                    fileMd5: fileMd5,
                    fileSize: fileSize
                };
                $.ajax({
                    type: "POST",
                    url: url,
                    data: data,
                    cache: false,
                    async: false, // 同步
                    timeout: 1000, // todo 超时的话，只能认为该分片未上传过
                    dataType: "json",
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        file.statusText = 'server_error';
                        task.reject();
                    }
                }).then(function(data, textStatus, jqXHR) {
                    if(data.rtn == 0) {
                        if(data.obj == 1) {
                            file.statusText = 'file_existed';
                            task.reject();
                        } else {
                            task.resolve();
                        }
                    } else {
                        task.reject();
                    }
                });
            });
            return task.promise();
        },
        beforeSend: function(block) {
            var task = new WebUploader.Deferred();
            var url = checkUrl;
            var data = {
                type: 1,
                fileName: fileName,
                fileMd5: fileMd5,
                chunk: block.chunk,
                fileSize: block.end - block.start
            };
            $.ajax({
                type: "POST",
                url: url,
                data: data,
                cache: false,
                async: false, // 同步
                timeout: 1000, // todo 超时的话，只能认为该分片未上传过
                dataType: "json"
            }).then(function(data, textStatus, jqXHR) {
                if(data.rtn == 0 && data.obj == 1) {
                    task.reject(); // 分片存在，则跳过上传
                } else {
                    task.resolve();
                }
            });
            this.owner.options.formData.fileMd5 = fileMd5;
            this.owner.options.formData.chunkSize = chunkSize;
            return task.promise();
        }
    });

    // 实例化
    uploader = WebUploader.create({
        pick: {
            id: '#filePicker',
            label: '点击选择文件'
        },
        formData: {
            uid: 123
        },
        dnd: '#dndArea', //指定文件拖拽的区域
        paste: '#uploader', //指定监听paste事件的容器，如果不指定，不启用此功能。此功能为通过粘贴来添加截屏的图片。建议设置为document.body.
        swf: '../plugins/webuploader/Uploader.swf',
        chunked: true,
        chunkSize: chunkSize,
        chunkRetry: false,
        threads: 1,
        server: uploadUrl,
        // runtimeOrder: 'flash',

        // accept: {
        //     title: 'Images',
        //     extensions: 'gif,jpg,jpeg,bmp,png',
        //     mimeTypes: 'image/*'
        // },
        // 禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候，把图片打开。
        disableGlobalDnd: true,
        fileNumLimit: 300 //限制多文件上传的个数
        //fileSizeLimit: 200 * 1024 * 1024, // 限制所有文件的大小 200 M
        //fileSingleSizeLimit: 50 * 1024 * 1024 // 限制单个文件的大小 50 M
    });
</script>

</body>
</html>